<template>
  <dialog_item :dialogTitle="$t('flowstaterts_detail')" @onBtnDialogClick="onBtnDialogClick" :visible.sync="dialogVisible" dialogClass='flowstatertsDetail' :isShowConfirmBtn="true">
    <p class="smallHeader">{{$t('baseInfo')}}</p>
    <p class="middleSize">{{$t('flowName')}}：{{detail.flowName}}</p>
    <p>{{$t('stateLabel')}}：{{detail.stateLabel}}</p>
    <p>{{$t('initiator')}}：{{detail.initiator}}</p>
    <p>{{$t('firstProcessTime')}}：{{detail.firstProcessTime}}</p>
    <p>{{$t('lastAuditor')}}：{{detail.lastAuditor}}</p>
    <p>{{$t('lastProcessTime')}}：{{detail.lastProcessTime}}</p>
    <p class="smallHeader">
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="6">
          <span>{{$t('flow_intervention')}}</span>
        </el-col>
        <el-col :span="4">
          <el-button size="small" type="primary" @click="showCon">{{$t('add_intervention_node')}}</el-button>
        </el-col>
      </el-row>
    </p>
    <div>
      <el-table
        :data="interveneNode.submitTo"
        style="width: 100%"
        size="mini">
        <el-table-column
          :label="$t('intervention_node')"
          width="180"
          prop="nodename">
        </el-table-column>
        <el-table-column
          :label="$t('node_approver')"
          width="360">
          <template slot-scope="scope" v-if="scope.row.flowType!='CompleteNode'&& scope.row.flowType!='AutoNode'">
            <el-select 
            v-model="scope.row.checkUserName" 
            popper-class="displayNone" 
            class="noXiala"
            multiple
            @remove-tag="deleteOneUser($event,scope.row)"
             >
              <el-option
                v-for="item in scope.row.users"
                :key="item.id"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
            <el-button @click="oneditUserSelectClick(scope.row)" class="chooseBtn">
              <i class="el-icon-user"></i>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column :label="$t('operating')">
          <template slot-scope="scope">
            <el-button @click="onDeleteCheckNode(scope.row)" class="chooseBtn">
              <i class="el-icon-close"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-form v-if="isShow" :inline="true" label-position="top">
      <el-form-item :label="$t('flow_node')" size="small" class="othernodes">
        <el-select class="" v-model="flowNode" >
          <el-option 
            :label="$t('placeholder_select')"
            value="">
          </el-option>
          <el-option v-for="item in flowOtherNodes" 
            :key="item.id"
            :label="item.statelabel"
            :value="item.statelabel">
          </el-option>
        </el-select> 
      </el-form-item>
      <el-form-item :label="$t('flow_node_after_intervention')" size="small" class="othernodes" v-show="flowNode!='' && (type!='CompleteNode' && type != 'AutoNode')">
        <el-select v-show="isCollapse" 
        v-model="haveCheckUserName" 
        popper-class="displayNone" 
        multiple
        :collapse-tags='isCollapse'
        @visible-change='changeSelectVis'
        @remove-tag="deleteUser">
          <el-option
            v-for="item in flowPreUser"
            :key="item.id"
            :label="item.name"
            :value="item.name">
          </el-option>
        </el-select>
        <el-select 
        v-show="!isCollapse"
        v-model="haveCheckUserName" 
        popper-class="displayNone" 
        multiple
        @remove-tag="deleteUser">
          <el-option
            v-for="item in flowPreUser"
            :key="item.id"
            :label="item.name"
            :value="item.name">
          </el-option>
        </el-select>
        
        <el-button @click="onUserSelectClick" class="chooseBtn">
          <i class="el-icon-user"></i>
        </el-button>
        
      </el-form-item>
      <el-form-item :label="$t('operating')" size="small">
        <el-button @click="oncheckNodeClick">
          <i class="el-icon-check"></i>
        </el-button>
      </el-form-item>
    </el-form>
    <user_selectionbox :visible.sync="userSelectVisible" v-if="userSelectVisible" :allId="allId" :flowPreUser="flowPreUser" @select-ok="onSelectUserOk"/>

    </dialog_item>
</template>

<script>
import user_selectionbox from "@/components/user_selectionbox.vue";

export default {
  components: {
    user_selectionbox,
  },
  props: ["visible","applicationId","id","flowstatertId"],
  data() {
    return {
      detail:{},
      flowOtherNodes:[],
      flowOtherPreNodes:[],

      // flowNode:"",
      nextnodeid:'',
      flowPreUser:[],
      flowNodeUser:"",
      type:"",
      userSelectVisible:false,
      haveCheckUserName:[],
      allId:{
        "applicationId":'',
        "docId":'',
        "flowId":'',
        "nodeId":'',
        "type":'',
        "selectId":'',
        "pageNum":1,
        "pageSize":10,
      },
      isShow:false,
      interveneNode:{
        "submitTo":[]
      },
      editIndex:0,
      isCollapse:true,
    };
  },
  created(){
    let that=this;
    this.$api.getFlowstatertsDetail(this.applicationId,this.flowstatertId, {
      onSucess: resp => {
        if(resp.data.errcode==0){
          that.detail=resp.data.data;
          that.detail.firstProcessTime=that.resolvingDate(that.detail.firstProcessTime)
          that.detail.lastProcessTime=that.resolvingDate(that.detail.lastProcessTime)
          that.allId.applicationId=that.applicationId;
          that.allId.docId=that.detail.docId;
          that.allId.flowId=that.detail.flowId;

        }
      }
    })
    this.$api.getFlowOtherNodes(this.applicationId,this.flowstatertId, {
      onSucess: resp => {
        if(resp.data.errcode==0){
          this.flowOtherNodes=resp.data.data;
          this.flowOtherPreNodes=[...this.flowOtherNodes];
        }
      }
    })
    
  },
  computed: {
    flowNode:{
      get(){
        let v="";
        let that=this;
        this.flowOtherNodes.forEach(elm=>{
          if(elm.id==that.nextnodeid){
            v=elm.statelabel
            that.type=elm.type;
          }
        })
        if(this.nextnodeid==""){
          v="";
        }
        return v;
      },
      set(val){
        let that=this;
        
        this.flowOtherNodes.forEach(elm=>{
          if(elm.statelabel==val){
            that.nextnodeid=elm.id
            that.type=elm.type;

          }
        })
        if(val==""){
          this.nextnodeid=""
        }else{
          this.getFlowPreUser();
        }
        return val;
      }
    },
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },
  methods: {
    onBtnDialogClick(name){
      if(name=='confirm'){
        this.onOk()
      }
    },
    //干预后流程节点处理人的下拉框变化事件
    changeSelectVis(bool){
      if(bool) this.isCollapse=false;
      else this.isCollapse=true;

    },
    onDeleteCheckNode(row){
      this.interveneNode.submitTo.splice(row.index-1,1)
      for(let i=row.index-1;i<this.interveneNode.submitTo.length;i++){
        this.interveneNode.submitTo[i].index--;
      }
      this.flowOtherPreNodes.forEach(el=>{
        if(el.id==row.nodeid){
          this.flowOtherNodes.push(el);
        }
      })
    },
    oncheckNodeClick(){
      let haveComplete=false;
      this.interveneNode.submitTo.forEach((el)=>{
        if(el.flowType=="CompleteNode"){
          haveComplete=true;
        }
      })
      if(haveComplete){
        this.$message({
          showClose: true,
          message: this.$t('msg_interven_not_another_node'),
          type: "error"
        });
        return false;
      }else if(this.type=="CompleteNode" && this.interveneNode.submitTo.length>0){
        this.$message({
          showClose: true,
          message: this.$t('msg_want_interven_delete_other_interven'),
          type: "error"
        });
        return false;
      }
      let ids="",length=this.flowPreUser.length;
      for(let i=0;i<length;i++){
        ids+=this.flowPreUser[i].id;
        if(i!=length-1){
          ids+=";";
        }
      }
      let checkUserName=[];
      if(this.flowPreUser.length>0){
        this.flowPreUser.forEach(el=>{
          checkUserName.push(el.name);
        })
      }else if(this.type !="CompleteNode" && this.type != "AutoNode"){
        this.$message({
          showClose: true,
          message: this.$t('msg_process_node_after_interven'),
          type: "error"
        });
        return false;
      }
      
      let data={index:this.interveneNode.submitTo.length+1,nodeid:this.nextnodeid,nodename:this.flowNode,"isToPerson":true,userids:ids,users:[...this.flowPreUser],checkUserName:checkUserName,flowType:this.type}
      this.flowOtherNodes.forEach((elm,ind)=>{
        if(elm.id==this.nextnodeid){
          this.flowOtherNodes.splice(ind,1);
        }
      })
      this.interveneNode.submitTo.push(data);
      this.nextnodeid="";
      this.flowNode="请选择";
      this.type=="";
      this.flowPreUser=[];
      

    },
    showCon(){
      this.isShow=true;
    },
    deleteUser(tag){
      let index=null;
      this.flowPreUser.forEach((el,ind)=>{
        if(el.name==tag){
          index=ind
        }
      })
      if(index!=null){
        this.flowPreUser.splice(index,1);
      }
    },
    deleteOneUser(tag,row){
      let index=null;
      row.users.forEach((el,ind)=>{
        if(el.name==tag){
          index=ind
        }
      })
      if(index!=null){
        row.users.splice(index,1);
      }
    },
    onSelectUserOk(row){
      if(row.length==0){
        this.$message({
          showClose: true,
          message: this.$t('msg_process_node_after_interven'),
          type: "error"
        });
        return false;
      }
      if(this.editIndex==0){
        this.flowPreUser=row;
        this.haveCheckUserName=[]
        row.forEach(el=>{
          this.haveCheckUserName.push(el.name)
        })
      }else{
        this.interveneNode.submitTo[this.editIndex-1].users=row;
        this.interveneNode.submitTo[this.editIndex-1].checkUserName=[];
        row.forEach(el=>{
          this.interveneNode.submitTo[this.editIndex-1].checkUserName   .push(el.name)
        })
             
      }
      // this.flowPreUser=row;
      // this.haveCheckUserName=[]
      // row.forEach(el=>{
      //   this.haveCheckUserName.push(el.name)
      // })
    },
    oneditUserSelectClick(row){
      this.allId.nodeId=row.nodeid;
      this.flowPreUser=row.users;
      this.editIndex=row.index;
      this.userSelectVisible=true;
    },
    onUserSelectClick(){
      this.allId.nodeId=this.nextnodeid;
      this.userSelectVisible=true;
    },
    getFlowPreUser(){
      let that=this;
      this.$api.getFlowPreUser(this.applicationId,this.id,this.nextnodeid, {
        onSucess: resp => {
          that.flowPreUser=[];
          that.haveCheckUserName=[]

          that.flowNodeUser="";
          if(resp.data.errcode==0){
            // this.flowPreUser=resp.data.data;
            resp.data.data.forEach(elm=>{
              that.flowPreUser.push({"id":elm.id,"name":elm.username})
              that.haveCheckUserName.push(elm.username)
              this.$forceUpdate();
            })
          }
        }
      })
    },
    resolvingDate(date){
      let d = new Date(date);

      let month = (d.getMonth() + 1) < 10 ? '0'+(d.getMonth() + 1) : (d.getMonth() + 1);
      let day = d.getDate()<10 ? '0'+d.getDate() : d.getDate();
      let hours = d.getHours()<10 ? '0'+d.getHours() : d.getHours();
      let min = d.getMinutes()<10 ? '0'+d.getMinutes() : d.getMinutes();
      let sec = d.getSeconds()<10 ? '0'+d.getSeconds() : d.getSeconds();

      let times=d.getFullYear() + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + sec;

      return times
    },
    onCancel(){
      this.dialogVisible=false;
    },
    onOk(){
      
      let data={
        "submitTo":[]
      }
      let ids="";
      let back=true;
      this.interveneNode.submitTo.forEach((el,ind)=>{
        if(el.users.length==0 &&  (el.flowType!="CompleteNode" && el.flowType !="AutoNode") ){
          back=false;
          return false;
        }else{
          let userids="",length=el.users.length;
          for(let i=0;i<length;i++){
            userids+=el.users[i].id;
            if(i!=length-1){
              userids+=";";
            }
          }
        
          let obj={"nodeid":el.nodeid,"isToPerson":true,userids:userids}
          data.submitTo.push(obj)
          if(ind!=this.interveneNode.submitTo.length-1)
          ids+=el.nodeid+","
          else
          ids+=el.nodeid
        }
      })
      if(!back){
        this.$message({
          showClose: true,
          message: this.$t('msg_process_node_after_interven'),
          type: "error"
        });
        return false;
      }
      if(data.submitTo.length==0){
        this.$message({
          showClose: true,
          message: this.$t('msg_no_choose_flownode'),
          type: "error"
        });
        return false;
      }
      this.$api.saveDoFlow(this.applicationId,this.id,ids,data ,{
        onSucess: resp => {
          if(resp.data.errcode==0){
            this.flowOtherNodes=resp.data.data;
            
            this.$message({
              showClose: true,
              message: this.$t('msg_intervent_ok'),
              type: "success"
            });
            this.dialogVisible=false;
            this.$emit("ok")
          }else{
            this.$message({
              showClose: true,
              message: this.$t('msg_intervent_fail'),
              type: "error"
            });
          }
        }
      })
    },
  }
};
</script>

<style lang="scss" scoped>
</style>